<template>
  <div
    :class="
      $cn('animate_circle cursor-pointer', {
        isActive: isShow,
      })
    "
  >
    <div class="circle">
      <span class="master_aperture circle1"></span>
      <span class="master_aperture circle2"></span>
    </div>
    <div class="double">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div
      class="arrow_up top-0 items-center justify-center flex absolute left-0 right-0 m-auto w-full h-full"
    >
      <!-- <slot></slot> -->
      <div class="w-[20px] h-[15px] overflow-hidden">
        <Arrow />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { debounce } from "lodash-es";
const isShow = ref(false);
const hanleScroll = () => {
  const scrollTop = document.documentElement.scrollTop;
  if (scrollTop > 300) {
    isShow.value = true;
  } else {
    isShow.value = false;
  }
};
onMounted(() => {
  if (import.meta.client) {
    window.addEventListener("scroll", debounce(hanleScroll, 100));
  }
});
</script>
<style lang="scss">
$theme: #c245bf;
@keyframes scalej01 {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 1;
    -webkit-opacity: 1;
  }
  100% {
    transform: scale(1.4);
    -webkit-transform: scale(1.4);
    opacity: 0;
    -webkit-opacity: 0;
  }
}
@keyframes pao {
  0% {
    transform: translate(200%, -30px) rotate(360deg) scale(0.4, 0.4);
    -webkit-transform: translate(200%, -30px) rotate(360deg) scale(0.4, 0.4);
    opacity: 1;
    -webkit-opacity: 1;
  }

  50% {
    transform: translate(0%, -70px) rotate(360deg) scale(0.8, 0.8);
    -webkit-transform: translate(0%, -70px) rotate(360deg) scale(0.8, 0.8);
    opacity: 0.5;
    -webkit-opacity: 0.5;
  }

  100% {
    transform: translate(-200%, -100px) rotate(360deg) scale(1, 1);
    -webkit-transform: translate(-200%, -100px) rotate(360deg) scale(1, 1);
    opacity: 0;
    -webkit-opacity: 0;
  }
}
@keyframes pao2 {
  0% {
    transform: translate(-200%, 0px) rotate(360deg) scale(1, 1);
    -webkit-transform: translate(-200%, 0px) rotate(360deg) scale(1, 1);
    opacity: 1;
    -webkit-opacity: 1;
  }

  50% {
    transform: translate(250%, -50px) rotate(360deg) scale(0.8, 0.8);
    -webkit-transform: translate(250%, -50px) rotate(360deg) scale(0.8, 0.8);
    opacity: 0.5;
    -webkit-opacity: 0.5;
  }

  100% {
    transform: translate(100%, -100px) rotate(360deg) scale(0.4, 0.4);
    -webkit-transform: translate(100%, -100px) rotate(360deg) scale(0.4, 0.4);
    opacity: 0;
    -webkit-opacity: 0;
  }
}
@keyframes pao3 {
  0% {
    transform: translate(0%, 0px) rotate(360deg) scale(1, 1);
    -webkit-transform: translate(0%, 0px) rotate(360deg) scale(1, 1);
    opacity: 1;
    -webkit-opacity: 1;
  }

  50% {
    transform: translate(-250%, -50px) rotate(360deg) scale(0.8, 0.8);
    -webkit-transform: translate(-250%, -50px) rotate(360deg) scale(0.8, 0.8);
    opacity: 0.5;
    -webkit-opacity: 0.5;
  }

  100% {
    transform: translate(-300%, -100px) rotate(360deg) scale(0.4, 0.4);
    -webkit-transform: translate(-300%, -100px) rotate(360deg) scale(0.4, 0.4);
    opacity: 0;
    -webkit-opacity: 0;
  }
}
@keyframes pao4 {
  0% {
    transform: translate(400%, 0px) rotate(360deg) scale(1, 1);
    -webkit-transform: translate(400%, 0px) rotate(360deg) scale(1, 1);
    opacity: 1;
    -webkit-opacity: 1;
  }

  50% {
    transform: translate(400%, -50px) rotate(360deg) scale(0.8, 0.8);
    -webkit-transform: translate(400%, -50px) rotate(360deg) scale(0.8, 0.8);
    opacity: 0.5;
    -webkit-opacity: 0.5;
  }

  100% {
    transform: translate(-100%, -100px) rotate(360deg) scale(0.4, 0.4);
    -webkit-transform: translate(-100%, -100px) rotate(360deg) scale(0.4, 0.4);
    opacity: 0;
    -webkit-opacity: 0;
  }
}
@keyframes pao5 {
  0% {
    transform: translate(-400%, 0px) rotate(360deg) scale(0.1, 0.1);
    -webkit-transform: translate(-400%, 0px) rotate(360deg) scale(0.1, 0.1);
    opacity: 1;
    -webkit-opacity: 1;
  }

  50% {
    transform: translate(-400%, -50px) rotate(360deg) scale(0.6, 0.6);
    -webkit-transform: translate(-400%, -50px) rotate(360deg) scale(0.6, 0.6);
    opacity: 0.5;
    -webkit-opacity: 0.5;
  }

  100% {
    transform: translate(0%, -100px) rotate(360deg) scale(1, 1);
    -webkit-transform: translate(0%, -100px) rotate(360deg) scale(1, 1);
    opacity: 0;
    -webkit-opacity: 0;
  }
}
.animate_circle {
  width: 4rem;
  position: fixed;
  right: 20px;
  z-index: 20;
  bottom: -100px;
  height: 4rem;
  transition: bottom 0.5s ease;
  &.isActive {
    bottom: 30px;
  }
  .arrow_up {
  }
  .circle {
    background-color: $theme;
    display: flex;
    align-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;

    justify-content: center;
    color: white;
    .master_aperture {
      background-color: rgba(194, 69, 191, 0.7);
      position: absolute;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      opacity: 0;
      -webkit-opacity: 0;
      width: 4rem;
      height: 4rem;
      z-index: -1;
      &.circle1 {
        animation: scalej01 2s 0.4s infinite;
        -webkit-animation: scalej01 2s 0.4s infinite;
      }
      &.circle2 {
        animation: scalej01 2s infinite;
      }
    }
  }
  .double {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    span {
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      z-index: -1;
      transition: ease 1s;
      -webkit-transition: ease 1s;
      position: absolute;
      left: 50%;
      bottom: 0px;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      opacity: 0;
      -webkit-opacity: 0;
    }
    span:nth-child(1) {
      animation: pao 4s linear infinite;
      -webkit-animation: pao 4s linear infinite;
      background: $theme;
      opacity: 0.6;
    }
    span:nth-child(2) {
      animation: pao3 6s linear infinite;
      -webkit-animation: pao3 6s linear infinite;
      -webkit-transition-delay: 0.3s;
      transition-delay: 0.3s;
      background: $theme;
      opacity: 0.8;
    }
    span:nth-child(3) {
      animation: pao2 3s linear infinite;
      -webkit-animation: pao2 3s linear infinite;
      -webkit-transition-delay: 0.8s;
      transition-delay: 0.8s;
      background: $theme;
    }
    span:nth-child(4) {
      animation: pao4 9s linear infinite;
      -webkit-animation: pao4 9s linear infinite;
      background: $theme;
      opacity: 0.3;
    }
    span:nth-child(5) {
      animation: pao5 7s linear infinite;
      -webkit-animation: pao5 7s linear infinite;
      background: $theme;
      opacity: 0.5;
    }
  }
}
</style>
